<!DOCTYPE html>
<html>
<head>
    <script src="./project/lib/vue3.4.21.js"></script>
    <script src="./project/lib/axios.min.js"></script>
</head>
<style>
    .images{
        width:150px;
        height:150px;
        float:left;
    }
    .images img{
        width:150px;
        height:130px;
    }
</style>
<body>
    </pre>
    <div id="app">
        <div>
            <div class="images" v-for="item in dataList">
                <img :src="item.work_url">
                {{item.work_name}}
            </div>
        </div>

        <button @click="getList">获取数据   </button>

    </div>
    <script type="module">
        const service = axios.create({
            baseURL: 'http://127.0.0.1:9908/api',
            timeout: 10000,
            headers: { 
                'Content-Type': 'application/json;charset=UTF-8'
            }
        })
        

        var c = 0;
        const app = Vue.createApp({
            //响应式变量
            data(){
                return {
                   dataList:[]
                }
            },
            //方法 
            methods:{
                getList(){
                    service.get("/work/imagelist?cat=1").then(res=>{
                        this.dataList = res.data.data
                    }).catch(err=>{
                        alert("接口返回错误")
                    })
                }
            },
            //初始化事件
            mounted(){
                
            }
        }).mount("#app");
    </script>

<pre>
  
</body>
</html>